<template>
  <div class="about">
    <!-- 引入组件 :title 为自定义的属性名 -->
    <!-- 单独组件样式-->
    <div :style="{fontSize: scaleFontSize}">
      <PropsComponent
      :key="index"
      v-for="(title,index) in titleList"
      :title="title"
      @enlarge-text="fontSize += 1"/>
    </div>
    <!--控制字体大小-->
    <input type="range" v-model="fontSize" min="10" max="20"/>

    <!-- 插槽内容 -->
    <SlotComponentVue>
      <p style="color: aqua;">Hello World</p>
    </SlotComponentVue>

      <button @click="changeComponent">切换组件</button>
      <component :is="componentName" />
  </div>
</template>

<script>
import PropsComponent from '@/components/PropsComponent.vue'
import SlotComponentVue from '@/components/SlotComponent.vue'
import DynamicComponent1Vue from '@/components/dynamic/DynamicComponent1.vue'
import DynamicComponent2Vue from '@/components/dynamic/DynamicComponent2.vue'
import DynamicComponent3Vue from '@/components/dynamic/DynamicComponent3.vue'
export default {
  // 组件
  components: {
    PropsComponent,
    SlotComponentVue,
    DynamicComponent1Vue,
    DynamicComponent2Vue,
    DynamicComponent3Vue
  },
  name: 'AboutView',
  data () {
    return {
      dynamicComponent: [
        DynamicComponent1Vue,
        DynamicComponent2Vue,
        DynamicComponent3Vue
      ],
      componentName: '',
      fontSize: 10,
      titleList: [
        'list1',
        'list2',
        'list3'
      ],
      initCount: 0
    }
  },
  computed: {
    // 计算属性限制字体的size
    scaleFontSize () {
      let size = this.fontSize
      if (this.fontSize <= 10) size = 10
      if (this.fontSize >= 20) size = 20
      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      this.fontSize = size
      return this.fontSize + 'px'
    }
  },
  mounted () {
    // 初始化组件
    this.initComponent()
  },
  methods: {
    initComponent () {
      this.componentName = this.dynamicComponent[0]
    },
    // 切换组件
    changeComponent () {
      const length = this.dynamicComponent.length
      this.initCount++
      if (this.initCount > (length - 1)) this.initCount = 0
      this.componentName = this.dynamicComponent[this.initCount]
    }
  },
  created: {

  }
}
</script>
